<template>
  <div class="box-wapper">
   {{name}}
    <div class="box-spine" :style="{height:scrollHeight+'px'}"></div>
    <div class="clearfix">
      <template v-for="(item,index) of articleList">
        <article-item :key="index" :article-item="item" :index="index+1-0"></article-item>
      </template>
    </div>
    <!-- <div class="box-more">加载更多</div> -->
  </div>
</template>

<script>
import service from '@/service';
// import charsleAside from '@/components/common/aside'
import articleItem from '@/components/common/list';
export default {
  name: 'home',
  props:['name'],
  data() {
    return {
      articleList: [],
      userInfo: {},
      scrollHeight: 0
    }
  },
  created() {
    // this.getUserInfo();
    this.getArticleList();
  },
  methods: {
    async getUserInfo() {
      let result = await service.getUserInfo();
      if (result.success) {
        this.userInfo = result.data;
      }
    },
    async getArticleList() {
      let loading = document.getElementById('show-loading')
      loading.style.display = 'flex'
      let result = await service.getArticleItemList({
        page: 1,
        pageSize: 10,
        type_alias: 'technology'
      });
      if (result.success) {
        this.articleList = result.data.pageList;
        var homeRight = document.querySelector('#mainbody');
        setTimeout(() => {
          this.scrollHeight = homeRight.scrollHeight
        }, 60);
        loading.style.display = 'none'
      }
    }
  },
  components: {
    // charsleAside,
    articleItem
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-spine {
  width: 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
  z-index: 1;
  border: dotted 1px #acb7c0;
}
.box-more {
  text-align: center;
  background: #fff;
}
</style>
